<!DOCTYPE HTML>
<html lang="zh">
<head>
    <title>编辑期刊</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background: linear-gradient(to right, #f8f9fa, #e9ecef);
            font-family: 'Arial', sans-serif;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: 600px;
            margin-top: 50px;
        }
        h1 {
            font-size: 2.5rem;
            color: #343a40;
            margin-bottom: 20px;
        }
        .form-group input, .form-group textarea {
            border-radius: 5px;
            border: 1px solid #ccc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 10px;
            font-size: 1rem;
        }
        .form-group textarea {
            min-height: 150px;
            resize: vertical;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            font-size: 1.2rem;
            padding: 12px;
            width: 100%;
            border-radius: 5px;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .btn-primary:focus {
            box-shadow: none;
        }
        .form-group label {
            font-weight: bold;
            color: #495057;
        }
        .alert {
            font-size: 1rem;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center">编辑期刊</h1>
    <form id="journalForm" class="mb-4">
        <div class="form-group">
            <input class="form-control" id="id" placeholder="ID" required readonly>
        </div>
        <div class="form-group">
            <input class="form-control" id="title" placeholder="标题" required>
        </div>
        <div class="form-group">
            <input class="form-control" id="authors" placeholder="作者" required>
        </div>
        <div class="form-group">
            <textarea class="form-control" id="abstracts" placeholder="摘要" required></textarea>
        </div>
        <div class="form-group">
            <input class="form-control" id="pdfurl" placeholder="网址" required>
        </div>
        <div class="form-group">
            <input class="form-control" id="pubDate" placeholder="出版日期" required>
        </div>
        <button type="button" class="btn btn-primary" onclick="saveJournal()">保存</button>
    </form>
</div>

<script>
    const apiUrl1 = 'http://127.0.0.1:8080/journal/list';
    const apiUrl2 = 'http://127.0.0.1:8080/journal/update';

    function fetchJournal(id) {
        fetch(`${apiUrl1}/${id}`, { method: 'GET' })
            .then(response => response.json())
            .then(data => {

                const res = data.data;
                document.getElementById('id').value = res.id;
                document.getElementById('title').value = res.title;
                document.getElementById('authors').value = res.author;
                document.getElementById('abstracts').value = res.abstracts;
                document.getElementById('pdfurl').value = res.pdfurl;
                document.getElementById('pubDate').value = res.pubDate;

            });
    }

    function saveJournal() {
        const id = document.getElementById('id').value;
        const journalData = {
            id: document.getElementById('id').value,
            title: document.getElementById('title').value,
            author: document.getElementById('authors').value,
            abstracts: document.getElementById('abstracts').value,
            pdfurl: document.getElementById('pdfurl').value,
            pubDate: document.getElementById('pubDate').value,
        };

        fetch(`${apiUrl2}/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(journalData)
        })
            .then(response => response.json())
            .then(data => {
                alert(data.success ? '保存成功' : '保存失败');
            })
            .catch(error => {
                console.error('发生错误:', error);
                alert('操作失败，请重试。');
            });
    }

    // 从 URL 获取 ID，调用 fetchJournal
    const urlParams = new URLSearchParams(window.location.search);
    const journalId = urlParams.get('id');
    if (journalId) {
        fetchJournal(journalId);
    }
</script>
</body>
</html>
